<script setup lang="ts">
import { ref } from 'vue'
const flag = ref(false)

// 1. 给显示隐藏的盒子 使用 Transition (vue内置的动画组件) 进行包裹
// 在切换的过程中, 会有v- 6个类, 会在不同的时间节点. 添加给盒子本身

// 2. 多个transition 使用不同的动画, 可以添加name属性, name属性的值替换v
</script>

<template>
  <button @click="flag = ! flag">显示隐藏</button>
  <Transition>
    <div v-if="flag"></div>
  </Transition>

  <!-- ------------------------------------------ -->

  <Transition name="bounce">
    <div v-if="flag"></div>
  </Transition>
</template>

<style scoped lang="less">
// transition 只能实现两个状态的切换, 如果有多个状态 - animation
@keyframes bounce {
  0% {
    transform: scale(0);
  }
  25% {
    transform: scale(1.5);
  }
  50% {
    transform: scale(0.8);
  }
  75% {
    transform: scale(1.2);
  }
  100% {
    transform: scale(1);
  }
}

.bounce-enter-active {
  animation: 3s bounce;
}

.bounce-leave-active {
  animation: 3s bounce reverse;
}









// ------------------------------
.fade-enter-from {
  opacity: 0;
  transform: translateX(200px);
}

.fade-enter-active {
  transition: all 5s;
}

.fade-enter-to {
  transform: translateX(0) ;
  opacity: 1;
}


// ------------------------------



// 显示 相关的类
.v-enter-from {
  width: 100px;
  height: 100px;
  opacity: 0;
}

.v-enter-active {
  transition: all 3s;
}

.v-enter-to {
  width: 200px;
  height: 200px;
  opacity: 1;
}

// 隐藏.....

.v-leave-from {
  opacity: 1;
}

.v-leave-active {
  transition: all 5s;
}

.v-leave-to {
  opacity: 0;
}




div {
  width: 200px;
  height: 200px;
  background-color: teal;
}
</style>